<script lang='ts' setup>
	import {
		theme
	} from '@/store/module/theme'
	import {
		ref
	} from 'vue'
	import Follow from './components/follow/index.vue'
	import Mood from './components/mood/index.vue'

	const tabsCurrent = ref('0')

	// 获取屏幕边界到安全区域距离
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()
</script>


<template>
	<view :class="theme()" class="w-full min-h-[100vh]"
		:style="{background:'var(--Gradient-color)',paddingTop: safeAreaInsets?.top + 'px'}">
		<nut-tabs v-model="tabsCurrent" type="smile" align='left' size="large"
			class="[&>.nut-tabs__titles .nut-tabs__titles-item]-text-[var(--text-color)]" background='transparent'>
			<nut-tab-pane title="关注" pane-key="0" class="p-0 text-[var(--text-color)]">
				<Follow></Follow>
			</nut-tab-pane>

			<nut-tab-pane title="心情" class="p-0" pane-key="2">
				<Mood></Mood>
			</nut-tab-pane>
		</nut-tabs>
	</view>

</template>

<style lang="scss">
	:deep(.nut-tabs__titles-item__text) {
		color: var(--text-color)
	}
</style>